<template>
  <div id="map"></div>
</template>
 
<script>
export default {
	name:'boxmap',
  data() {
    return {};
  },
  components: {},
  created() {},
  mounted() {
    this.initmap();
  },
  computed: {},
  methods: {
    initmap() {
      this.$mapboxgl.accessToken =
        "pk.eyJ1IjoibGlqaWFuZ2ppYW5namlhbmciLCJhIjoiY2s2b2czbmltMG14cDNkbXpldjhkd3c3ZiJ9.zBaMzJo2X2UVPyFTtd5hEQ";
      var map = new this.$mapboxgl.Map({
        container: "map",
        // style: "mapbox://styles/mapbox/streets-v11",
				style: 'mapbox://styles/mapbox/light-v10',
        center: [104.07, 30.67],
        zoom: 5,
        pitch: 60, //视野倾斜，0-60
        bearing: -17.6,//视野旋转角度
      });
			
			// 注意：使用箭头函数
			map.on('load',()=>{
				map.flyTo({
					center: [104.07, 30.67],
					zoom: 5,
					speed: 0.2,
					curve: 2,
				})
			})
			map.setStyle('mapbox://styles/mapbox/streets-v11')  //街道图
			// map.setStyle('mapbox://styles/mapbox/satellite-v9') //卫星图
      //注册点击事件
      map.on("click", function(e) {
        console.log("点击");
      });
    }
  }
};
</script>
 
<style lang="less">
#map {
  height: 500px;
  // border: 1px solid red;
}
</style>
